<html><head>
	<style>
	html 
	{ 
		font:10pt Verdana; 
		overflow:hidden;
		background-color:transparent;
		background-image:url(BACK.PNG);
		background-repeat:expand;
		background-position:15 15 15 15;
	}
	body 
	{ 
		padding:3px;
		margin:0;
		width:100%%; 
		height:100%%; 
	}

	#topbar
	{
		flow:horizontal;
		margin-bottom:3px;
	}

	#topbar #caption 
	{
		//color: #274749;
		color: black;
		padding:0 4px;
		outline:3px glow #274749;
	}
	#content
	{
		background-color:white;
		width:100%%; 
		height:100%%; 
		overflow:auto;
	}
	#topbar widget[type="button"] 
	{
		width:1em;
		height:1em;
		background-image:none;
		padding:1px;
		font-family: marlett;
		font-size:10pt;
		color: #274749;
		border:1px solid #B0CFD1;
		text-align:center;
		vertical-align:center;
		margin:0;
		//transition:none;
		
	}
	#topbar widget[type="button"]:hover 
	{
		color:orange;
		border-color:orange;
		background-color:#B0CFD1;
		outline:2px glow orange 4px;
	} 
	#topbar widget[type="button"]:active 
	{
		background-color:#274749;
	} 

	#topbar #minimize,
	#topbar #maximize { margin-right:2px; } 

	#topbar #icon 
	{
		foreground-image:url(icon.png);
		foreground-repeat:no-repeat;
		foreground-position:50% 50%;
	}

	#bottombar 
	{
		margin-top:3px;
		flow:horizontal;
	}

	#bottombar #corner
	{
	    margin-top:100%%;
		font-family: marlett;
		font-size:10pt;
		color: #274749;
		width:min-intrinsic;
	}

	#bottombar #status
	{
		color: #274749;
		font-size:9pt;
	}

	img:hover
	{
	  transition:blend;
	  //outline: 2px dotted invert 5px;
	  foreground-image-transformation: contrast-brightness-gamma(0.25,0.95, 1.0);
	}

    img[src="big-green-button.png"]:hover
	{
	  foreground-image-transformation: colorize(#7f00ff);
	}

	popup[role="tooltip"] /* tooltips */
	{
	  font:system;
	}

	p.with-back 
	{
	  padding:7px;
		background-image:url(big-green-button.png);
		background-repeat:stretch;
		//background-position:10 10 10 10;
	}

	img.shell-icon 
	{
		width:20px;
		height:20px;
		behavior: file-icon;
		vertical-align:middle;
	}

  div.semitrans 
      { 
        position:fixed; 
        top:50px; 
        bottom:50px; 
        left:50%; 
        right:50px; 
        background-color: rgba(255,0,0,0.25) rgba(255,0,0,0.75) rgba(255,0,0,0.75) rgba(255,0,0,0.25);
        border: 4px solid rgba(0,0,128,0.75);
      } 
      
  .graphin-clock 
  {
     border:1px solid; 
	   behavior:graphin-clock;
	   width:153px;
	   height:153px;

     /* clock face */	   
	   //background-image:url(clock-images/clock-back.png);
	   //background-repeat:no-repeat;	   
	   //background-position:50% 50%; /* middle center */
	   
	   /* clock glass */	   
	   //foreground-image:url(clock-images/clock-fore.png);
	   //foreground-repeat:no-repeat;	   
	   //foreground-position:50% 50%; /* middle center */
   
	}	      

	</style>
</head>
<body>
	<div id="topbar">
		<widget id="icon" type="button"></widget>
		<div id="caption"></div>
		<widget id="minimize" type="button">0</widget>
		<widget id="maximize" type="button">1</widget>
		<widget id="close" type="button" title="Guess what is this button doing?">r</widget>
	</div>
	<div id="content">
	  Hello world! Some input: <input type="text" /> and button <button id="button-to-click">Click me!</button>. Image with alpha: <img src="big-red-button.png" />, other image without alpha: <img src="big-green-button.png" /> with <code>colorize(#7f00ff)</code> on hover
	  <br/>
	  Some <button type="radio">radio</button>, <button type="checkbox">checkbox</button> and <button>normal</button> buttons.
    Progress <progress value=10 min=0 max=100>.
    
    <p>Select:
    <select>
       <OPTION VALUE=0 SELECTED>not specified</OPTION><OPTION VALUE=1 >Afghanistan</OPTION><OPTION VALUE=2 >Albania</OPTION><OPTION VALUE=3 >Algeria</OPTION><OPTION VALUE=4 >American Samoa</OPTION><OPTION VALUE=5 >Andorra</OPTION><OPTION VALUE=6 >Angola</OPTION><OPTION VALUE=7 >Anguilla</OPTION><OPTION VALUE=8 >Antarctica</OPTION><OPTION VALUE=9 >Antigua And Barbuda</OPTION><OPTION VALUE=10 >Argentina</OPTION><OPTION VALUE=11 >Armenia</OPTION><OPTION VALUE=12 >Aruba</OPTION><OPTION VALUE=13 >Australia</OPTION><OPTION VALUE=14 >Austria</OPTION><OPTION VALUE=15 >Azerbaijan</OPTION><OPTION VALUE=16 >Bahamas</OPTION><OPTION VALUE=17 >Bahrain</OPTION><OPTION VALUE=18 >Bangladesh</OPTION><OPTION VALUE=19 >Barbados</OPTION><OPTION VALUE=20 >Belarus</OPTION><OPTION VALUE=21 >Belgium</OPTION><OPTION VALUE=22 >Belize</OPTION><OPTION VALUE=23 >Benin</OPTION><OPTION VALUE=24 >Bermuda</OPTION><OPTION VALUE=25 >Bhutan</OPTION><OPTION VALUE=26 >Bolivia</OPTION><OPTION VALUE=27 >Bosnia and Herzegovina</OPTION><OPTION VALUE=28 >Botswana</OPTION><OPTION VALUE=29 >Bouvet Island</OPTION><OPTION VALUE=30 >Brazil</OPTION><OPTION VALUE=31 >British Indian Ocean Territory</OPTION><OPTION VALUE=32 >Brunei Darussalam</OPTION><OPTION VALUE=33 >Bulgaria</OPTION><OPTION VALUE=34 >Burkina Faso</OPTION><OPTION VALUE=35 >Burundi</OPTION><OPTION VALUE=36 >Cambodia</OPTION><OPTION VALUE=37 >Cameroon</OPTION><OPTION VALUE=38 >Canada</OPTION><OPTION VALUE=39 >Cape Verde</OPTION><OPTION VALUE=40 >Cayman Islands</OPTION><OPTION VALUE=41 >Central African Republic</OPTION><OPTION VALUE=42 >Chad</OPTION><OPTION VALUE=43 >Chile</OPTION><OPTION VALUE=44 >China</OPTION><OPTION VALUE=45 >Christmas Island</OPTION><OPTION VALUE=46 >Cocos (Keeling) Islands</OPTION><OPTION VALUE=47 >Colombia</OPTION><OPTION VALUE=48 >Comoros</OPTION><OPTION VALUE=49 >Congo</OPTION><OPTION VALUE=50 >Congo, Democratic Republic</OPTION><OPTION VALUE=51 >Cook Islands</OPTION><OPTION VALUE=52 >Costa Rica</OPTION><OPTION VALUE=53 >Cote d'Ivoire</OPTION><OPTION VALUE=54 >Croatia</OPTION><OPTION VALUE=55 >Cuba</OPTION><OPTION VALUE=56 >Cyprus</OPTION><OPTION VALUE=57 >Czech Republic</OPTION><OPTION VALUE=58 >Denmark</OPTION><OPTION VALUE=59 >Djibouti</OPTION><OPTION VALUE=60 >Dominica</OPTION><OPTION VALUE=61 >Dominican Republic</OPTION><OPTION VALUE=62 >East Timor</OPTION><OPTION VALUE=63 >Ecuador</OPTION><OPTION VALUE=64 >Egypt</OPTION><OPTION VALUE=65 >El Salvador</OPTION><OPTION VALUE=66 >Equatorial Guinea</OPTION><OPTION VALUE=67 >Eritrea</OPTION><OPTION VALUE=68 >Estonia</OPTION><OPTION VALUE=69 >Ethiopia</OPTION><OPTION VALUE=70 >Falkland Islands</OPTION><OPTION VALUE=71 >Faroe Islands</OPTION><OPTION VALUE=72 >Fiji</OPTION><OPTION VALUE=73 >Finland</OPTION><OPTION VALUE=74 >France</OPTION><OPTION VALUE=75 >French Guiana</OPTION><OPTION VALUE=76 >French Polynesia</OPTION><OPTION VALUE=77 >French Southern Territories</OPTION><OPTION VALUE=78 >Gabon</OPTION><OPTION VALUE=79 >Gambia</OPTION><OPTION VALUE=80 >Georgia</OPTION><OPTION VALUE=81 >Germany</OPTION><OPTION VALUE=82 >Ghana</OPTION><OPTION VALUE=83 >Gibraltar</OPTION><OPTION VALUE=84 >Greece</OPTION><OPTION VALUE=85 >Greenland</OPTION><OPTION VALUE=86 >Grenada</OPTION><OPTION VALUE=87 >Guadeloupe</OPTION><OPTION VALUE=88 >Guam</OPTION><OPTION VALUE=89 >Guatemala</OPTION><OPTION VALUE=90 >Guinea</OPTION><OPTION VALUE=91 >Guinea-Bissau</OPTION><OPTION VALUE=92 >Guyana</OPTION><OPTION VALUE=93 >Haiti</OPTION><OPTION VALUE=94 >Heard and Mc Donald Islands</OPTION><OPTION VALUE=95 >Holy See - Vatican City</OPTION><OPTION VALUE=96 >Honduras</OPTION><OPTION VALUE=97 >Hong Kong</OPTION><OPTION VALUE=98 >Hungary</OPTION><OPTION VALUE=99 >Iceland</OPTION><OPTION VALUE=100 >India</OPTION><OPTION VALUE=101 >Indonesia</OPTION><OPTION VALUE=102 >Iran, Islamic Republic</OPTION><OPTION VALUE=103 >Iraq</OPTION><OPTION VALUE=104 >Ireland</OPTION><OPTION VALUE=105 >Israel</OPTION><OPTION VALUE=106 >Italy</OPTION><OPTION VALUE=107 >Jamaica</OPTION><OPTION VALUE=108 >Japan</OPTION><OPTION VALUE=109 >Jordan</OPTION><OPTION VALUE=110 >Kazakstan</OPTION><OPTION VALUE=111 >Kenya</OPTION><OPTION VALUE=112 >Kiribati</OPTION><OPTION VALUE=113 >Korea, Peoples Republic</OPTION><OPTION VALUE=114 >Korea, Republic of</OPTION><OPTION VALUE=115 >Kuwait</OPTION><OPTION VALUE=116 >Kyrgyzstan</OPTION><OPTION VALUE=117 >Lao People's Republic</OPTION><OPTION VALUE=118 >Latvia</OPTION><OPTION VALUE=119 >Lebanon</OPTION><OPTION VALUE=120 >Lesotho</OPTION><OPTION VALUE=121 >Liberia</OPTION><OPTION VALUE=122 >Libyan Arab Jamahiriya</OPTION><OPTION VALUE=123 >Liechtenstein</OPTION><OPTION VALUE=124 >Lithuania</OPTION><OPTION VALUE=125 >Luxembourg</OPTION><OPTION VALUE=126 >Macau</OPTION><OPTION VALUE=127 >Macedonia</OPTION><OPTION VALUE=128 >Madagascar</OPTION><OPTION VALUE=129 >Malawi</OPTION><OPTION VALUE=130 >Malaysia</OPTION><OPTION VALUE=131 >Maldives</OPTION><OPTION VALUE=132 >Mali</OPTION><OPTION VALUE=133 >Malta</OPTION><OPTION VALUE=134 >Marshall Islands</OPTION><OPTION VALUE=135 >Martinique</OPTION><OPTION VALUE=136 >Mauritania</OPTION><OPTION VALUE=137 >Mauritius</OPTION><OPTION VALUE=138 >Mayotte</OPTION><OPTION VALUE=139 >Mexico</OPTION><OPTION VALUE=140 >Micronesia, Federated States</OPTION><OPTION VALUE=141 >Moldova, Republic of</OPTION><OPTION VALUE=142 >Monaco</OPTION><OPTION VALUE=143 >Mongolia</OPTION><OPTION VALUE=144 >Montserrat</OPTION><OPTION VALUE=145 >Morocco</OPTION><OPTION VALUE=146 >Mozambique</OPTION><OPTION VALUE=147 >Myanmar</OPTION><OPTION VALUE=148 >Namibia</OPTION><OPTION VALUE=149 >Nauru</OPTION><OPTION VALUE=150 >Nepal</OPTION><OPTION VALUE=151 >Netherlands</OPTION><OPTION VALUE=152 >Netherlands Antilles</OPTION><OPTION VALUE=153 >New Caledonia</OPTION><OPTION VALUE=154 >New Zealand</OPTION><OPTION VALUE=155 >Nicaragua</OPTION><OPTION VALUE=156 >Niger</OPTION><OPTION VALUE=157 >Nigeria</OPTION><OPTION VALUE=158 >Niue</OPTION><OPTION VALUE=159 >Norfolk Island</OPTION><OPTION VALUE=160 >Northern Mariana Islands</OPTION><OPTION VALUE=161 >Norway</OPTION><OPTION VALUE=162 >Oman</OPTION><OPTION VALUE=163 >Pakistan</OPTION><OPTION VALUE=164 >Palau</OPTION><OPTION VALUE=165 >Palestinian Territory</OPTION><OPTION VALUE=166 >Panama</OPTION><OPTION VALUE=167 >Papua New Guinea</OPTION><OPTION VALUE=168 >Paraguay</OPTION><OPTION VALUE=169 >Peru</OPTION><OPTION VALUE=170 >Philippines</OPTION><OPTION VALUE=171 >Pitcairn</OPTION><OPTION VALUE=172 >Poland</OPTION><OPTION VALUE=173 >Portugal</OPTION><OPTION VALUE=174 >Puerto Rico</OPTION><OPTION VALUE=175 >Qatar</OPTION><OPTION VALUE=176 >Reunion</OPTION><OPTION VALUE=177 >Romania</OPTION><OPTION VALUE=178 >Russian Federation</OPTION><OPTION VALUE=179 >Rwanda</OPTION><OPTION VALUE=180 >St. Helena</OPTION><OPTION VALUE=181 >Saint Kitts and Nevis</OPTION><OPTION VALUE=182 >Saint Lucia</OPTION><OPTION VALUE=183 >St. Pierre and Miquelon</OPTION><OPTION VALUE=184 >Saint Vincent - Grenadines</OPTION><OPTION VALUE=185 >Samoa (Independent)</OPTION><OPTION VALUE=186 >San Marino</OPTION><OPTION VALUE=187 >Sao Tome and Principe</OPTION><OPTION VALUE=188 >Saudi Arabia</OPTION><OPTION VALUE=189 >Senegal</OPTION><OPTION VALUE=190 >Seychelles</OPTION><OPTION VALUE=191 >Sierra Leone</OPTION><OPTION VALUE=192 >Singapore</OPTION><OPTION VALUE=193 >Slovakia</OPTION><OPTION VALUE=194 >Slovenia</OPTION><OPTION VALUE=195 >Solomon Islands</OPTION><OPTION VALUE=196 >Somalia</OPTION><OPTION VALUE=197 >South Africa</OPTION><OPTION VALUE=198 >South Georgia - South Sandwich</OPTION><OPTION VALUE=199 >Spain</OPTION><OPTION VALUE=200 >Sri Lanka</OPTION><OPTION VALUE=201 >Sudan</OPTION><OPTION VALUE=202 >Suriname</OPTION><OPTION VALUE=203 >Svalbard - Jan Mayen Islands</OPTION><OPTION VALUE=204 >Swaziland</OPTION><OPTION VALUE=205 >Sweden</OPTION><OPTION VALUE=206 >Switzerland</OPTION><OPTION VALUE=207 >Syrian Arab Republic</OPTION><OPTION VALUE=208 >Taiwan</OPTION><OPTION VALUE=209 >Tajikistan</OPTION><OPTION VALUE=210 >Tanzania</OPTION><OPTION VALUE=211 >Thailand</OPTION><OPTION VALUE=212 >Togo</OPTION><OPTION VALUE=213 >Tokelau</OPTION><OPTION VALUE=214 >Tonga</OPTION><OPTION VALUE=215 >Trinidad and Tobago</OPTION><OPTION VALUE=216 >Tunisia</OPTION><OPTION VALUE=217 >Turkey</OPTION><OPTION VALUE=218 >Turkmenistan</OPTION><OPTION VALUE=219 >Turks and Caicos Islands</OPTION><OPTION VALUE=220 >Tuvalu</OPTION><OPTION VALUE=221 >Uganda</OPTION><OPTION VALUE=222 >Ukraine</OPTION><OPTION VALUE=223 >United Arab Emirates</OPTION><OPTION VALUE=224 >United Kingdom</OPTION><OPTION VALUE=225 >United States</OPTION><OPTION VALUE=226 >United States Minor Islands</OPTION><OPTION VALUE=227 >Uruguay</OPTION><OPTION VALUE=228 >Uzbekistan</OPTION><OPTION VALUE=229 >Vanuatu</OPTION><OPTION VALUE=230 >Venezuela</OPTION><OPTION VALUE=231 >Viet Nam</OPTION><OPTION VALUE=232 >Virgin Islands (British)</OPTION><OPTION VALUE=233 >Virgin Islands (U.S.)</OPTION><OPTION VALUE=234 >Wallis and Futuna Islands</OPTION><OPTION VALUE=235 >Western Sahara</OPTION><OPTION VALUE=236 >Yemen</OPTION><OPTION VALUE=237 >Yugoslavia</OPTION><OPTION VALUE=238 >Zambia</OPTION><OPTION VALUE=239 >Zimbabwe</OPTION>		  
     </select>
    </p>
    <div style="opacity:0.7; background:blue url(big-green-button.png) no-repeat; width:25%; height:100px;">
      element with opacity:0.7      
    </div>
    
	  <p .with-back>The quick brown fox jumps over the lazy dog</p>
      <p>The quick brown fox jumps over the lazy dog</p>
	  <p>&#1042; &#1095;&#1072;&#1097;&#1072;&#1093; &#1102;&#1075;&#1072; &#1078;&#1080;&#1083; &#1073;&#1099; &#1094;&#1080;&#1090;&#1088;&#1091;&#1089;? &#1044;&#1072;, &#1085;&#1086; &#1092;&#1072;&#1083;&#1100;&#1096;&#1080;&#1074;&#1099;&#1081; &#1101;&#1082;&#1079;&#1077;&#1084;&#1087;&#1083;&#1103;&#1088;&#1098;!</p>
	  <p>Falsches &#220;ben von Xylophonmusik qu&#228;lt jeden gr&#246;&#223;eren Zwerg</p>
	  <p>The quick brown fox jumps over the lazy dog</p>
    <text style="outline:3px glow black 1px">Outline glow</text>

    <option><img class="shell-icon" filename=".png" /> *.png icon</option>
    <option><img class="shell-icon" filename=".jpg" /> *.jpg icon</option>
    <option><img class="shell-icon" filename=".doc" /> *.doc icon</option>
    <option><img class="shell-icon" filename=".html" /> *.html icon</option>
    <option><img class="shell-icon" filename=".cpp" /> *.cpp icon</option>
    <option><img class="shell-icon" filename=".h" /> *.h icon</option>
    <option><img class="shell-icon" filename=".js" /> *.js icon</option>
    <option><img class="shell-icon" filename=".exe" /> *.exe icon</option>

    <div style="background-color:rgba(255,0,0,0.25)"> 0.25</div>
    <div style="background-color:rgba(255,0,0,0.50)"> 0.50</div>
    <div style="background-color:rgba(255,0,0,0.75)"> 0.75</div>
    <div style="background-color:rgba(255,0,0,1.0)">1.00</div>
    <div style="background-color:rgb(255,0,0) rgba(255,0,0,0.15) rgba(255,0,0,0.15) rgb(255,0,0)">grad</div>
    
    <img .graphin-clock 
          hand-hours=#0a0  
          hand-minutes=#00a
          hand-seconds=#a00   />

	</div>
	<div id="bottombar">
		<div id="status">This is the <i>status</i>...</div>
		<div id="corner">o</div>
	</div>

  <div class="semitrans">Semitransparent</div>

</body>
</html>
